<div class="page" data-ng-controller="EditarUsuariosCtrl as editarCtrl">
    <div class="row">
        <div class="col-xs-12">
            <h2 class="section-header" data-translate="PAGE_USERS_TITLE"></h2>
        </div>
    </div>

    <form name="frmEditarUsuario" data-ng-submit="guardarCambios()"  class="row form-validation" novalidate>

        <section class="panel panel-default">
            <fieldset class="panel-body padding-xl">
                <div class="row">
                    <div class="col-xs-5 col-xs-offset-1">

                        <!-- Identificacion input text -->
                        <div class="form-group clearfix">
                            <label class="col-md-4 control-label" for="Identificacion" data-translate="PAGE_USERS_LABEL_ID"></label>
                            <div class="col-md-8">
                                <input 
                                    type="text"
                                    name="Identificacion"
                                    class="form-control input-md"
                                    required=""
                                    maxlength="30"
                                    data-ng-model="usuario.Identificacion" />
                                <div 
                                    class="text-danger"
                                    role="alert"
                                    data-ng-messages="frmEditarUsuario.Identificacion.$error"
                                    data-ng-show="frmEditarUsuario.Identificacion.$invalid">
                                    <div data-ng-message="required"><span data-translate="GENERIC_FORM_ERROR_REQUIRED"></span></div>
                                </div>
                            </div>
                        </div>

                        <!-- Nombre input text -->
                        <div class="form-group clearfix">
                            <label class="col-md-4 control-label" for="Nombre" data-translate="PAGE_USERS_LABEL_NAME"></label>
                            <div class="col-md-8">
                                <input 
                                    type="text"
                                    name="Nombre"
                                    class="form-control input-md"
                                    required=""
                                    maxlength="30"
                                    data-ng-model="usuario.Nombre" />
                                <div 
                                    class="text-danger"
                                    role="alert"
                                    data-ng-messages="frmEditarUsuario.Nombre.$error"
                                    data-ng-show="frmEditarUsuario.Nombre.$invalid">
                                    <div data-ng-message="required"><span data-translate="GENERIC_FORM_ERROR_REQUIRED"></span></div>
                                </div>
                            </div>
                        </div>

                        <!-- PApellido input text -->
                        <div class="form-group clearfix">
                            <label class="col-md-4 control-label" for="PApellido" data-translate="PAGE_USERS_LABEL_LAST_NAME"></label>
                            <div class="col-md-8">
                                <input 
                                    type="text"
                                    name="PApellido"
                                    class="form-control input-md"
                                    required=""
                                    maxlength="30"
                                    data-ng-model="usuario.PApellido" />
                                <div 
                                    class="text-danger"
                                    role="alert"
                                    data-ng-messages="frmEditarUsuario.PApellido.$error"
                                    data-ng-show="frmEditarUsuario.PApellido.$invalid">
                                    <div data-ng-message="required"><span data-translate="GENERIC_FORM_ERROR_REQUIRED"></span></div>
                                </div>
                            </div>
                        </div>

                        <!-- SApellido input text -->
                        <div class="form-group clearfix">
                            <label class="col-md-4 control-label" for="SApellido" data-translate="PAGE_USERS_LABEL_SECOND_SURNAME"></label>
                            <div class="col-md-8">
                                <input 
                                    type="text"
                                    name="SApellido"
                                    class="form-control input-md"
                                    required=""
                                    maxlength="30"
                                    data-ng-model="usuario.SApellido" />
                                <div 
                                    class="text-danger"
                                    role="alert"
                                    data-ng-messages="frmEditarUsuario.SApellido.$error"
                                    data-ng-show="frmEditarUsuario.SApellido.$invalid">
                                    <div data-ng-message="required"><span data-translate="GENERIC_FORM_ERROR_REQUIRED"></span></div>
                                </div>
                            </div>
                        </div>

                        <!-- FechaNacimiento input text -->
                        <div class="form-group clearfix">
                            <label class="col-md-4 control-label" for="FechaNacimiento" data-translate="PAGE_USERS_LABEL_DATE_OF_BIRTH"></label>
                            <div class="col-md-8">
                                <div class="input-group">
                                    <input 
                                        type="text"
                                        class="form-control"
                                        required=""
                                        name="FechaNacimiento"
                                        ng-model="usuario.FechaNacimiento"
                                        datepicker-popup="{{dateFormat}}"
                                        max-date="maxDate"
                                        show-weeks="false"
                                        show-button-bar="false"
                                        is-open="opened" />
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-default" ng-click="openDatepicker($event)"><i class="fa fa-calendar"></i></button>
                                    </div>
                                </div>
                                <div 
                                    class="text-danger"
                                    role="alert"
                                    data-ng-messages="frmEditarUsuario.FechaNacimiento.$error"
                                    data-ng-show="frmEditarUsuario.FechaNacimiento.$invalid">
                                    <div data-ng-message="required"><span data-translate="GENERIC_FORM_ERROR_REQUIRED"></span></div>
                                    <div data-ng-message="date"><span data-translate="GENERIC_FORM_ERROR_DATE_FORMAT"></span></div>
                                </div>
                            </div>
                        </div>

                        <!-- FechaIngreso input text -->
                        <div class="form-group clearfix">
                            <label class="col-md-4 control-label" for="FechaIngreso" data-translate="PAGE_USERS_LABEL_DATE_OF_ADMISSION"></label>
                            <div class="col-md-8">
                                <input 
                                    type="text"
                                    name="FechaIngreso"
                                    class="form-control input-md"
                                    readonly=""
                                    data-ng-model="usuario.FechaIngreso" />
                                <div 
                                    class="text-danger"
                                    role="alert"
                                    data-ng-messages="frmEditarUsuario.FechaIngreso.$error"
                                    data-ng-show="frmEditarUsuario.FechaIngreso.$invalid">
                                    <div data-ng-message="required"><span data-translate="GENERIC_FORM_ERROR_REQUIRED"></span></div>
                                </div>
                            </div>
                        </div>

                        <!-- GeneroCode radios group (inline) -->
                        <div class="form-group clearfix">
                            <label class="col-md-4 control-label" for="GeneroCode" data-translate="PAGE_USERS_LABEL_GENDER"></label>
                            <div class="col-md-8" data-ng-init="usuario.GeneroCode?1:usuario.GeneroCode=M"> 
                                <md-radio-group ng-model="usuario.GeneroCode">
                                    <md-radio-button value="M" class="md-primary">
                                        <span data-translate="GENERIC_GENDER_MALE"></span>
                                    </md-radio-button>
                                    <md-radio-button value="F" class="md-primary"> 
                                        <span data-translate="GENERIC_GENDER_FEMALE"></span>
                                    </md-radio-button>
                                    <md-radio-button value="O" class="md-primary">
                                        <span data-translate="GENERIC_GENDER_OTHER"></span>
                                    </md-radio-button>
                                </md-radio-group>
                                <!-- <label class="radio-inline" for="GeneroCode-0">
                                    <input type="radio" name="GeneroCode" id="GeneroCode-0" value="M">
                                    <span data-translate="GENERIC_GENDER_MALE"></span>
                                </label> 
                                <label class="radio-inline" for="GeneroCode-1">
                                    <input type="radio" name="GeneroCode" id="GeneroCode-1" value="F">
                                    <span data-translate="GENERIC_GENDER_FEMALE"></span>
                                </label> 
                                <label class="radio-inline" for="GeneroCode-2">
                                    <input type="radio" name="GeneroCode" id="GeneroCode-2" value="O">
                                    <span data-translate="GENERIC_GENDER_OTHER"></span>
                                </label> -->
                            </div>
                        </div>

                        <!-- Alias input text -->
                        <div class="form-group clearfix">
                            <label class="col-md-4 control-label" for="Alias" data-translate="PAGE_USERS_LABEL_ALIAS"></label>
                            <div class="col-md-8">
                                <input 
                                    type="text"
                                    name="Alias"
                                    class="form-control input-md"
                                    maxlength="80"
                                    data-ng-model="usuario.Alias" />
                            </div>
                        </div>

                        <!-- Telefono input text -->
                        <div class="form-group clearfix">
                            <label class="col-md-4 control-label" for="Telefono" data-translate="PAGE_USERS_LABEL_PHONE"></label>
                            <div class="col-md-8">
                                <input 
                                    type="text"
                                    name="Telefono"
                                    class="form-control input-md"
                                    required=""
                                    maxlength="20"
                                    pattern="^\d{4,}[\-]{0,1}\d{4,}$"
                                    data-ng-model="usuario.Telefono" />
                                <div 
                                    class="text-danger"
                                    role="alert"
                                    data-ng-messages="frmEditarUsuario.Telefono.$error"
                                    data-ng-show="frmEditarUsuario.Telefono.$invalid">
                                    <div data-ng-message="required"><span data-translate="GENERIC_FORM_ERROR_REQUIRED"></span></div>
                                    <div data-ng-message="pattern"><span data-translate="GENERIC_FORM_ERROR_PHONE_FORMAT"></span></div>
                                </div>
                            </div>
                        </div>

                        <!-- Correo input text -->
                        <div class="form-group clearfix">
                            <label class="col-md-4 control-label" for="Correo" data-translate="PAGE_USERS_LABEL_EMAIL"></label>
                            <div class="col-md-8">
                                <input 
                                    type="email"
                                    name="Correo"
                                    class="form-control input-md"
                                    required=""
                                    maxlength="80"
                                    data-ng-model="usuario.Correo" />
                                <div 
                                    class="text-danger"
                                    role="alert"
                                    data-ng-messages="frmEditarUsuario.Correo.$error"
                                    data-ng-show="frmEditarUsuario.Correo.$invalid">
                                    <div data-ng-message="required"><span data-translate="GENERIC_FORM_ERROR_REQUIRED"></span></div>
                                    <div data-ng-message="pattern"><span data-translate="GENERIC_FORM_ERROR_PHONE_FORMAT"></span></div>
                                </div>
                            </div>
                        </div>

                        <!-- EstadoCode radios group (inline) -->
                        <div class="form-group clearfix">
                            <label class="col-md-4 control-label" for="EstadoCode" data-translate="PAGE_USERS_LABEL_STATE"></label>
                            <div class="col-md-8"> 
                                <md-radio-group ng-model="usuario.EstadoCode">
                                    <md-radio-button value="A" class="md-primary">
                                        <span data-translate="PAGE_USERS_STATE_ACTIVE"></span>
                                    </md-radio-button>
                                    <md-radio-button value="I" class="md-primary"> 
                                        <span data-translate="PAGE_USERS_STATE_INACTIVE"></span>
                                    </md-radio-button>
                                </md-radio-group>
                                <!-- <label class="radio-inline" for="EstadoCode-0">
                                    <input type="radio" name="EstadoCode" id="EstadoCode-0" value="M">
                                    <span data-translate="PAGE_USERS_STATE_ACTIVE"></span>
                                </label> 
                                <label class="radio-inline" for="EstadoCode-1">
                                    <input type="radio" name="EstadoCode" id="EstadoCode-1" value="F">
                                    <span data-translate="PAGE_USERS_STATE_INACTIVE"></span>
                                </label> -->
                            </div>
                        </div>

                    </div>

                    <div class="col-xs-5">


                        <!-- FotoBase64 input text -->
                        <div class="form-group clearfix">
                            <label class="col-md-4 control-label" for="alias" data-translate="PAGE_USERS_LABEL_PHOTO"></label>
                            <div class="col-md-8">
                                <div class="ih-item circle">
                                    <a href="" vg-simulate-click="#usuarioFotoFileInput">
                                        <div class="img">
                                            <img ng-if="!usuario.FotoBase64" src="images/assets/default-profile-image.svg" alt="User image">
                                            <img ng-if="usuario.FotoBase64" ng-src="{{usuario.FotoBase64}}" alt="{{usuario.nombre}}">
                                        </div>
                                        <div class="info">
                                            <p data-translate="PAGE_USERS_IMAGE_HOVER"></p>
                                        </div>
                                    </a>
                                </div>
                                <input
                                    type="file"
                                    id="usuarioFotoFileInput"
                                    accept="image/*"
                                    style="display: none;"
                                    data-ng-model="usuario.FotoBase64"
                                    data-vg-file-select=""
                                    />
                            </div>
                        </div>

                        <!-- NombreUsuario input text -->
                        <div class="form-group clearfix">
                            <label class="col-md-4 control-label" for="NombreUsuario" data-translate="PAGE_USERS_LABEL_USERNAME"></label>
                            <div class="col-md-8">
                                <input 
                                    type="text"
                                    name="NombreUsuario"
                                    class="form-control input-md"
                                    required=""
                                    pattern="^[A-Za-z0-9_]{1,}$"
                                    maxlength="80"
                                    data-ng-model="usuario.NombreUsuario" />
                                <div 
                                    class="text-danger"
                                    role="alert"
                                    data-ng-messages="frmEditarUsuario.NombreUsuario.$error"
                                    data-ng-show="frmEditarUsuario.NombreUsuario.$invalid">
                                    <div data-ng-message="required"><span data-translate="GENERIC_FORM_ERROR_REQUIRED"></span></div>
                                    <div data-ng-message="pattern"><span data-translate="PAGE_FORM_ERROR_USERNAME_FORMAT"></span></div>
                                </div>
                            </div>
                        </div>

                        <!-- ClaveUsuario input text -->
                        <div class="form-group clearfix">
                            <label class="col-md-4 control-label" for="ClaveUsuario" data-translate="PAGE_USERS_LABEL_PASSWORD"></label>
                            <div class="col-md-8">
                                <md-checkbox class="md-primary" ng-true-value="1" ng-false-value="0" ng-model="usuario.ResetPass" aria-label="{{'PAGE_USERS_CTA_RESET_PASSWORD' | translate}}">
                                    <span data-translate="PAGE_USERS_CTA_RESET_PASSWORD"></span>
                                </md-checkbox>
                            </div>
                        </div>

                        <!-- DiscripcionTipoId select -->
                        <div class="form-group clearfix">
                            <label class="col-md-4 control-label" for="DiscripcionTipoId" data-translate="PAGE_USERS_LABEL_IDENTIFICATION"></label>
                            <div class="col-md-8">
                                <select
                                    name="DiscripcionTipoId"
                                    id="DiscripcionTipoId"
                                    class="form-control"
                                    required=""
                                    data-ng-model="usuario.DiscripcionTipoId"
                                    data-ng-options="tipo for tipo in tiposId">
                                        <option value="">{{'GENERIC_LABEL_PICK_OPTION' | translate}}</option>
                                </select>
                            </div>
                        </div>

                        <!-- Nacionalidad select -->
                        <div class="form-group clearfix">
                            <label class="col-md-4 control-label" for="Nacionalidad" data-translate="PAGE_USERS_LABEL_NATIONALITY"></label>
                            <div class="col-md-8">
                                <select
                                    name="Nacionalidad"
                                    id="Nacionalidad"
                                    class="form-control"
                                    required=""
                                    data-ng-model="usuario.Nacionalidad"
                                    data-ng-options="nacionalidad for nacionalidad in nacionalidades">
                                        <option value="">{{'GENERIC_LABEL_PICK_OPTION' | translate}}</option>
                                </select>
                            </div>
                        </div>

                        <!-- Rol select -->
                        <div class="form-group clearfix">
                            <label class="col-md-4 control-label" for="Rol" data-translate="PAGE_USERS_LABEL_ROL"></label>
                            <div class="col-md-8">
                                <select
                                    name="Rol"
                                    id="Rol"
                                    class="form-control"
                                    required=""
                                    data-ng-model="usuario.Rol"
                                    data-ng-options="rl.Id as rl.Nombre for rl in roles">
                                        <option value="">{{'GENERIC_LABEL_PICK_OPTION' | translate}}</option>
                                </select>
                                <!-- <pre>{{roles | json}}</pre> -->
                            </div>
                        </div>

                        <!-- TipoCode select -->
                        <div class="form-group clearfix">
                            <label class="col-md-4 control-label" for="TipoCode" data-translate="PAGE_USERS_LABEL_USER_TYPE"></label>
                            <div class="col-md-8">
                                <select
                                    name="TipoCode"
                                    id="TipoCode"
                                    class="form-control"
                                    required=""
                                    data-ng-model="usuario.TipoCode">
                                        <option value="">{{'GENERIC_LABEL_PICK_OPTION' | translate}}</option>
                                        <option value="C">{{'PAGE_USERS_OPTION_CLIENT' | translate}}</option>
                                        <option value="F">{{'PAGE_USERS_OPTION_WORKER' | translate}}</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                        </div>

                        <div class="actions text-right">
                            <md-button href="#/usuarios/listar" aria-label="{{'GENERIC_FORM_CTA_CANCEL' | translate}}">
                                <span data-translate="GENERIC_FORM_CTA_CANCEL"></span>
                            </md-button><span class="space"></span>
                            <md-button type="submit" class="md-raised md-primary" aria-label="{{'GENERIC_FORM_CTA_SAVE_CHANGES' | translate}}" ng-disabled="frmEditarUsuario.$invalid">
                                <span data-translate="GENERIC_FORM_CTA_SAVE_CHANGES"></span>
                            </md-button>
                        </div>

                    </div>
                </div>
            </fieldset>
        </section>

    </form>
</div>